<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- (c) 2014 J D Eisenberg -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>CSS with Links in SVG</title>
  <style type="text/css">
    a.words:hover {text-decoration: underline; font-weight:bold}
    a.shapes:hover {stroke: #66f; stroke-width: 2}
  </style>
</head>

<body>

<div id="svgOutput">
  <svg width="200" height="100" viewBox="0 0 200 100" id="svgSvg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg">
    <a class="words" xlink:href="cat.svg">
      <text x="100" y="30" style="font-size: 12pt;">Cat</text>
    </a>

    <a class="shapes" xlink:href="http://www.w3.org/SVG/">
      <circle cx="50" cy="70" r="20" style="fill: red;"/>
      <rect x="75" y="50" width="40" height="40" style="fill: green;"/>
      <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/>
    </a>
  </svg>
</div>

</body>
</html>

